<template>
  <div class="strut-div">
    <div class="item-top-city">
      <span class="time">时间：{{ nowDate }}</span>
      <!-- <span style="float: right;">
        <el-radio-group v-model="cityType" size="mini">
          <el-radio-button label="假日市场"></el-radio-button>
          <el-radio-button label="文旅景点"></el-radio-button>
        </el-radio-group>
      </span> -->
    </div>
    <div style="height: 336px;">
      <common-bar-chart ref="citySourceBar" :config="config"></common-bar-chart>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
export default {
  components: {
    CommonBarChart
  },
  data() {
    return {
      cityType: '假日市场',
      nowDate: '',
      startDate: '',
      endDate: '',
      config:{
        request: {
          url: "url",
          params: {},
        },
        option: {
          id: 'citySourceBar',
          yName:"(%)",
          xAxis: [],
          y: [{
            axis: {
              min: null,
              max: null,
              name:'(%)'
            },
            title: '',
            data: [],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#6C43F7' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#B49EFF' // 100% 处的颜色
              }],
            },
            stack: '1'
          }]
        }
      }
    };
  },
  mounted() {
    this.nowDate = new Date().format('yyyy年mm月dd日');
    this.startDate = new Date().format('yyyy-mm') + '-01';
    this.endDate = new Date().format('yyyy-mm-dd');
    this.getReceptionNumRange();
  },
  methods: {
    getReceptionNumRange() {
        let that = this;
        let _url = this.$api.getReceptionNumRange;
        let _param = {
          dataSource: '04',
          sFJNM: '00010001001400090001',
          sAreaType: '01',
          sObjName: '全部',
          sSelName: '全部',
          sObjType: '02',
          startDate: this.startDate,
          endDate: this.endDate
        }

        this.$jquery.ajax({
          type: 'post',
          url:_url,
          dataType: 'json',
          data: _param,
          contentType:'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
          if (res.retCode === 200) {
              let data = res.retData.listData;
              that.config.option.xAxis = data.strarrNameBar;
              that.config.option.y[0].data = data.strarrValueBar1;

              that.$refs.citySourceBar.initChart();
          }
          }
        });
    }
  }
};
</script>

<style>
.item-top-city {
  padding: 10px 20px;
}
.item-top-city .time {
  font-size: 22px;
  color: #c1d0ff;
}

.item-top-city .el-radio-button--mini .el-radio-button__inner {
  font-size: 18px;
}

.item-top-city .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
  border-color: rgba(144, 110, 252, 1);
  background: linear-gradient(90deg, rgba(108, 67, 247, 1), rgba(180, 158, 255, 1));
}
.item-top-city .el-radio-button__inner:hover {
  color: rgba(144, 110, 252, 1);
}
.item-top-city .el-radio-button__inner {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(144, 110, 252, 1);
  padding: 5px 12px;
  color: #fff;
}
.item-top-city .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}
.item-top-city .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}
</style>
